<template>
  <div class="out-style">
    <common-contract :title="title"></common-contract>
    <el-form label-width="120px" :model="ruleForm" ref="ruleForm" :rules="rules">
      <p class="divider"></p>
      <div class="mian-title">{{$t('message.sh')}}</div>
      <!--
            <p class="divider"></p>
            <div class="mian-title">审核记录</div>
            <div class="inner-style">
                <el-form-item label="审核记录:">
                    <div style="padding-top: 8px;">
                        <div v-for="item in reviewList" :key="item" style="margin: 0 0 10px 10px; line-height: 24px;">
                            <p>
                                <span>{{item.createTime}}</span>
                                <span>{{item.roleName}}</span>
                            </p>
                            <p>
                                审核结果：{{item.approvalStatus}}
                            </p>
                            <p>
                                审核意见：{{item.approvalComments}}
                            </p>
                        </div>
                    </div>
                </el-form-item>
            </div>
      -->
      <el-form-item label-width="270px" :label="$t('message.shyj')+':'" prop="auditComment">
        <el-input
          style="width: 485px;"
          type="textarea"
          :rows="5"
          :placeholder="$t('message.p-srnr')"
          show-word-limit
          maxlength="512"
          v-model="ruleForm.auditComment"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="btn">
      <button type="button" @click="reject" class="fail">{{$t('message.bnt-bh')}}</button>
      <button type="button" @click="submit('pass')" class="submit">{{$t('message.bnt-shtg')}}</button>
    </div>
  </div>
</template>


<script>
import commonContract from "@components/commoncontract.vue";

export default {
  data() {
    return {
      title: this.$t("message.zz-titlt"),
      ruleForm: {
        auditComment: ""
      },
      rules: {
        auditComment: [
          { required: true, message: this.$t("message.m1"), trigger: "blur" },
          { max: 1028, message: this.$t("message.m3"), trigger: "blur" }
        ]
      },
      reviewList: []
    };
  },
  components: {
    commonContract
  },
  mounted() {
    // 审核记录
    this.$axios
      .get("/api/contractApprovalLog/getAuditRecord", {
        params: {
          id: this.$route.query.id
        }
      })
      .then(res => {
        if (res.code === 200) {
          this.reviewList = res.data;
        } else {
          this.$message.error(res.message);
        }
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    // 驳回
    reject() {
      this.$confirm(this.$t("message.qrbhgcsh"), this.$t("message.ts"), {
        confirmButtonText: this.$t("message.ture"),
        cancelButtonText: this.$t("message.false"),
        type: "warning"
      }).then(res => {
        this.submit("fail");
      });
    },
    submit(type) {
      //提交
      const url =
        type === "pass"
          ? "/api/contract/contractAuditPass" // 通过
          : "/api/contract/contractAuditReject"; // 驳回

      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          const params = {
            id: this.$route.query.id,
            ...this.ruleForm
          };

          this.$axios
            .get(url, {
              params
            })
            .then(res => {
              if (res.code === 200) {
                this.$message.success(this.$t("message.czcg"));

                this.$router.push({
                  path: "/contract",
                  query: {}
                });
              } else {
                this.$message.error(res.message);
              }
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          this.$message.error(this.$t("message.m14"));
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.out-style {
  width: 100%;
  background: #fff;
  padding: 60px 120px;
}
.inner-style {
  width: 100%;
  margin: 0 auto;
}
.divider {
  width: 100%;
  border-top: 1px dashed #d9e1e9;
  margin-top: 12px;
}
.mian-title {
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 16px;
  font-size: 16px;
  border-left: 4px solid #fe8c01;
  padding-left: 10px;
  margin: 12px 0 24px 0;
}
h2 {
  margin: 0 0 30px;
  font-size: 18px;
  text-align: center;
}
.el-form-item {
  margin-bottom: 16px;
  margin-left: 10px;
}
.spanStyle {
  margin-left: 16px;
  margin-right: 4px;
  font-size: 14px;
  color: #606266;
}

.btn {
  text-align: center;
  margin: 40px 0 50px 0;
}
.submit {
  width: 171px;
  height: 40px;
  color: rgba(255, 255, 255, 1);
  border: none;
  background: linear-gradient(
    90deg,
    rgba(255, 192, 2, 1) 0%,
    rgba(254, 140, 1, 1) 100%
  );
}
.fail {
  width: 171px;
  height: 40px;
  margin-right: 46px;
  border: 1px solid rgba(151, 151, 151, 1);
  font-size: 14px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  background-color: #ffffff;
}
</style>